<!-- ProductFileRegistration:产品档案登记 -->
<template>
	<div style="text-align:left;">
		<el-drawer :visible.sync="drawer" :direction="direction" size="30%">
			<el-form ref="form" label-width="100px" :model="productFiles">
				<div style="box-shadow: 0 10px 10px rgba(132, 172, 232, .12), 0 0 6px rgba(132, 172, 232, .04)">
					<el-row>
						<el-col :span="24">
							<h4>&nbsp;&nbsp;&nbsp;辅助信息：</h4>
						</el-col>
					</el-row>
					<el-row style="margin-top: 15px;">
						<el-col :span="20" :offset="1">
							<el-form-item label="替代品名称:">
								<el-input v-model="productFiles.nameOfSubstitutes"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="替代品编号:">
								<el-input oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" v-model="productFiles.substituteNumber"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="生命周期(年):">
								<el-input oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" v-model="productFiles.lifeCycle"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="单位:">
								<el-input v-model="productFiles.unit"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="产品经理:">
								<el-input oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" v-model="productFiles.productManager"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="供应商集合:">
								<el-input v-model="productFiles.supplierSet" type="textarea" :rows="2"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="产品描述:">
								<el-input v-model="productFiles.productDescription" type="textarea" :rows="2"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
		</el-drawer>
		<!-- 主题 -->
		<el-container style="height: 525px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
			<el-main>
				<el-form ref="form" :model="productFiles" :rules="rules">
					<div>
						<el-row>
							<el-col :span="24" style="text-align: left;">
								<h3>&nbsp;&nbsp;&nbsp;主信息：</h3>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="10" :offset="1">
								<el-form-item label="产品名称:" prop="productName" label-width="110px">
									<el-input v-model="productFiles.productName" size="mini"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="10" :offset="2">
								<el-form-item label="制造商:" label-width="110px" >
									<el-input v-model='productFiles.manufacturer' size="mini"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="8" :offset="1">
								<!-- 一级分类，进入页面时进行绑定 -->
								<el-form-item label="I级分类:" prop="proclassOne" label-width="110px">
									<el-select v-model="productFiles.proclassOne" @change="ByProclassOnefindProductTwo()" placeholder="请选择" size="mini">
										<el-option v-for="proclass in proclassOnes" :key="proclass.iId" :label="proclass.proName" :value="proclass.iId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8" :offset="4">
								<!-- 二级分类，通过一级分类修改进行改变 -->
								<el-form-item label="II级分类:" prop="productTwo" label-width="110px">
									<el-select  size="mini" v-model="productFiles.productTwo" @change="ByProclassTwofindProductThree()" placeholder="请选择">
										<el-option v-for="productTwo in productTwos" :key="productTwo.iiId" :label="productTwo.proName" :value="productTwo.iiId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="8" :offset="1">
								<!-- 三级分类，进入页面时进行绑定 -->
								<el-form-item label="III级分类:" prop="productThree" label-width="110px">
									<el-select v-model="productFiles.productThree" placeholder="请选择" size="mini">
										<el-option v-for="productThree in productThrees" :key="productThree.iiiId" :label="productThree.proName"
										 :value="productThree.iiiId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6" :offset="4">
								<el-form-item label="产品简称:" label-width="110px" >
									<el-input v-model="productFiles.productReferredToAs" size="mini"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="8" :offset="1">
								<!-- 用途类型，进入页面时进行绑定 -->
								<el-form-item label="用途类型:" prop="useTheType" label-width="110px">
									<el-select  size="mini" v-model="productFiles.useTheType" clearable placeholder="请选择">
										<el-option v-for="useTheType in useTheTypes" :key="useTheType.pId" :label="useTheType.protype" :value="useTheType.pId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8" :offset="4">
								<!-- 档次级别，通过一级分类修改进行改变 -->
								<el-form-item label="档次级别:" prop="classLevel" label-width="110px">
									<el-select size="mini" v-model="productFiles.classLevel" clearable placeholder="请选择">
										<el-option v-for="classLevel in classLevels" :key="classLevel.levelnum" :label="classLevel.levelName" :value="classLevel.levelnum"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="7" :offset="1">
								<el-form-item label="计量单位:" label-width="110px">
									<el-input size="mini" v-model="productFiles.unitOfMeasurement"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="7" :offset="5">
								<el-form-item label="计量值:" label-width="110px">
									<el-input size="mini" oninput="value=value.replace(/[^\d]/g,'')" v-model="productFiles.variable"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="7" :offset="1">
								<el-form-item label="市场单价(元):" prop="theMarketPrice" label-width="110px">
									<el-input size="mini" oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" v-model="productFiles.theMarketPrice"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="7" :offset="5">
								<el-form-item label="计划成本单价:" prop="unitPriceOfPlannedCost" label-width="110px">
									<el-input size="mini" oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" v-model="productFiles.unitPriceOfPlannedCost"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="7" :offset="1">
								<el-form-item label="登记人:" label-width="100px">
									<el-input size="mini" v-model="productFiles.registrant"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="7" :offset="5">
								<el-form-item label="建档时间:" label-width="100px">
									<span>{{nowTime}}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="8" :offset="4">
								<el-button size="medium" type="info" @click="drawer = true">辅助信息</el-button>
							</el-col>
							<el-col :span="8" :offset="4">
								<el-button size="medium" type="primary" @click="handleSubmit()">提交</el-button>
							</el-col>
						</el-row>
					</div>
				</el-form>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'ProductFileRegistration',
		data() {
			return {
				/* 用于验证 */
				productFiles: {
					/* 拿到当前用户选择添加的一级分类 */
					proclassOne: '',
					/* 拿到当前用户选择添加的二级分类 */
					productTwo: '',
					/* 拿到当前用户选择添加的二级分类 */
					productThree: '',
					/* 拿到当前用户选择的用途类型 */
					useTheType: '',
					/* 拿到当前用户选择的档次级别 */
					classLevel: '',
					/* 替代品名称 */
					nameOfSubstitutes: '',
					/* 替代品编号 */
					substituteNumber: '',
					/* 生命周期(年) */
					lifeCycle: '',
					/* 单位 */
					unit: '',
					/* 产品经理 */
					productManager: '',
					/* 产品描述 */
					productDescription: '',
					/* 产品名称 */
					productName: '',
					/* 制造商 */
					manufacturer: '',
					/* 产品简称 */
					productReferredToAs: '',
					/* 计量单位 */
					unitOfMeasurement: '',
					/* 计量值 */
					variable: '',
					/* 市场单价(元) */
					theMarketPrice: '',
					/* 登记人 */
					registrant: '',
					/* 计划成本单价 */
					unitPriceOfPlannedCost: '',
					/* 供应商集合 */
					supplierSet: '',
				},
				/* 抽屉 */
				drawer: false,
				direction: 'ltr',
				/* 档次级别 */
				classLevels: [],
				/* 用途类型 */
				useTheTypes: [],
				/* 从数据库中根据一级分类查询二级分类 */
				productThrees: [],
				/* 从数据库中根据一级分类查询二级分类 */
				productTwos: [],
				/* 从数据库中查询所有的一级分类 */
				proclassOnes: [],
				/* 当前时间 */
				nowTime: '',
				/* 验证 */
				rules: {
					proclassOne: [{
						required: true,
						message: "一级分类未选择",
						trigger: "blur"
					}],
					productTwo:[{
						required: true,
						message: "二级分类未选择",
						trigger: "blur"
					}],
					productThree:[{
						required: true,
						message: "三级分类未选择",
						trigger: "blur"
					}],
					productName:[{
						required: true,
						message: "产品名称不能为空",
						trigger: "blur"
					}],
					useTheType:[{
						required: true,
						message: "用途类型未选择",
						trigger: "blur"
					}],
					classLevel:[{
						required: true,
						message: "档次级别未选择",
						trigger: "blur"
					}],
					theMarketPrice:[{
						required: true,
						message: "市场单价(元)不能为空",
						trigger: "blur"
					}],
					unitPriceOfPlannedCost:[{
						required: true,
						message: "计划成本单价不能为空",
						trigger: "blur"
					}]
				},
			}
		},
		mounted: function() {
			/* 页面加载时启动计时器 */
			this.currentTime();
			/* 页面加载时加载基本下拉框【除去二级分类和三级分类】 */
			this.findAllDropDownBox();
		},
		methods: {
			/* 加载下拉框 */
			findAllDropDownBox() {
				/* 加载一级分类 */
				this.$http.post("design/proclassOne/getFindOneCslassifyAll").then(res => {
					this.proclassOnes = res.data;
				});

				/* 加载用途类型 */
				this.$http.post("design/protype/getFindProtypeAll").then(res => {
					this.useTheTypes = res.data;
				});

				/* 加载档次级别 */
				this.$http.post("design/prolevel/getFindProlevelsAll").then(res => {
					this.classLevels = res.data;
				});
			},

			/**
			 * 根据一级分类查询二级分类
			 */
			ByProclassOnefindProductTwo() {
				this.$http.post("design/procalssTwo/getByProclassOneByIIdfindProductTwo", "iId=" + this.productFiles.proclassOne).then(res => {
					this.productFiles.productTwo = '';
					this.productTwos = res.data;
				})
			},

			/**
			 * 根据二级分类查询三级分类
			 */
			ByProclassTwofindProductThree() {
				this.$http.post("design/proclassThree/getByProcalssTwoByIiIdfindProclassThree", "iiId=" + this.productFiles.productTwo).then(
					res => {
						this.productFiles.productThree = '';
						this.productThrees = res.data;
					})
			},

			/* 判断信息是否填入 */
			handleSubmit() {
				/* 传入的对象参数 */
				var params = {
					"pName" : this.productFiles.productName,
					"mfr" : this.productFiles.manufacturer,
					"iId" : this.productFiles.proclassOne,
					"iiId" : this.productFiles.productTwo,
					"iiiId" : this.productFiles.productThree,
					"projName" : this.productFiles.productReferredToAs,
					"yongType" : this.productFiles.useTheType,
					"levelNum" : this.productFiles.classLevel,
					"unit" : this.productFiles.unitOfMeasurement,
					"unitNum" : this.productFiles.variable,
					"shiPrice" : this.productFiles.theMarketPrice,
					"price" : this.productFiles.unitPriceOfPlannedCost,
					"denjiper" : this.productFiles.registrant,
					"tName" : this.productFiles.nameOfSubstitutes,
					"tId" : this.productFiles.substituteNumber,
					"year" : this.productFiles.lifeCycle,
					"uint" : this.productFiles.unit,
					"eId" : this.productFiles.productManager,
					"mkrList" : this.productFiles.supplierSet,
					"prodes" : this.productFiles.productDescription,
					"time" : this.nowTime,
					"customAudit" : "未审核"
				};

				this.$refs["form"].validate((valid) => {
					if(valid){
						/* 添加产品档案信息 */
						this.$http.post("design/proInformation/getInsertProInformation",this.$qs.stringify(params)).then(res => {
							console.log(res);
							if(res.data >= 0){
								this.$message.success('添加档案信息成功！');
								/* 关闭抽屉 */
								this.drawer = false;
								this.$router.push("design/ReviewProductFileRegistration");
							}else{
								this.$message.error('添加档案信息失败！');
							}
						})
					}else{
						this.$message.error('必填信息未填满！');
					}
				})
			},

			/* 定时器 */
			currentTime() { //定时器
				setInterval(this.getDate, 100);
			},

			/* 获取当前时间 */
			getDate() {
				const year = new Date().getFullYear()
				const month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
				const date = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
				const hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
				const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
				const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
				const week = new Date().getDay()
				this.nowTime = year + '-' + month + '-' + date + ' ' + hh + ':' + mm + ':' + ss
			}
		},
		// 销毁定时器
		beforeDestroy: function() {
			if (this.getDate) {
				clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
			}
		},
	}
</script>

<style scoped>
	.el-main {
		margin-top: 5px;
		background-color: #FFFFFF;
	}

	.el-header {
		background-color: #333333;
	}
</style>
